// 分类页面组件
import React from "react";
import { Card, Row, Col } from "antd";


export default function CategoryPage({ isMobile }: { isMobile: boolean }) {
  // 模拟分类数据
  const categories = [
    { id: 1, name: "手机数码", icon: "📱", color: "#1890ff" },
    { id: 2, name: "电脑办公", icon: "💻", color: "#52c41a" },
    { id: 3, name: "家用电器", icon: "🏠", color: "#faad14" },
    { id: 4, name: "服饰内衣", icon: "👕", color: "#f5222d" },
    { id: 5, name: "运动户外", icon: "⚽", color: "#13c2c2" },
    { id: 6, name: "汽车用品", icon: "🚗", color: "#722ed1" },
    { id: 7, name: "母婴用品", icon: "🍼", color: "#eb2f96" },
    { id: 8, name: "食品饮料", icon: "🍎", color: "#fa8c16" }
  ];

  return (
    <div style={{ padding: "12px 0" }}>
      <h2 style={{ marginBottom: 12, fontSize: isMobile ? 16 : 18 }}>商品分类</h2>
      <Row gutter={[12, 12]}>
        {categories.map((category) => (
          <Col span={12} key={category.id}>
            <Card
              hoverable
              style={{
                background: `linear-gradient(135deg, ${category.color}11, #fff)`,
                border: `1px solid ${category.color}22`
              }}
              bodyStyle={{ padding: isMobile ? 10 : 12 }}
            >
              <div style={{ display: "flex", alignItems: "center" }}>
                <div style={{ width: isMobile ? 40 : 46, height: isMobile ? 40 : 46, display: "flex", alignItems: "center", justifyContent: "center" }}>
                  <div style={{ fontSize: isMobile ? 22 : 24 }}>{category.icon}</div>
                </div>
                <div style={{ marginLeft: 10 }}>
                  <div style={{ fontSize: isMobile ? 14 : 16, fontWeight: 500 }}>{category.name}</div>
                  <div style={{ fontSize: isMobile ? 11 : 12, color: "#666", marginTop: 4 }}>查看全部商品</div>
                </div>
              </div>
            </Card>
          </Col>
        ))}
      </Row>
    </div>
  );
}